import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    InputItem,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {routerRedux} from "dva/router";
import {distribution,distributionSearch} from './distribution.less';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";
import {articleLabel} from "../find/publish.less";
import {IMAGE_DOMAIN} from "../../utils/common";
import {btn} from "../balance/myPhone.less";

const Item = Popover.Item;




class EditMyDistribution extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            value:"",
            img:""
        };

        this.AlloyTouch = null;
    }

    componentDidMount(){
        console.log(111, '开始发送请求没有DetailEFF')
        this.props.dispatch({type:"distribution/myDetailEFF"});
    }


    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };

    onChange=(e)=>{
        let files = e.target.files;
        this.props.dispatch({type:"orderList/upLoadEFF",obj:{upfile: files[files.length - 1]}}).then(res =>{
            if(res.code==200){
                this.setState({
                    img:res.ret.url
                })
                console.log(this.img)
            }
        })
    }
    edit=()=>{
        const { storeName } = this.props.form.getFieldsValue();
        if(storeName||this.state.img!==""){
            this.props.dispatch({type:"distribution/editStoreEFF",obj:{logo: this.state.img,name:storeName}}).then(res =>{
                if(res.code==200){
                    Toast.success(res.msg,2,()=>{
                        this.props.dispatch(routerRedux.push({
                            pathname:`/my`
                        }))
                    })
                }
            })
        }else{
            Toast.info("请选择一项修改!",2)
        }
    }
    render() {
        const {dispatch,distribution} = this.props;
        const { getFieldProps} = this.props.form;
        console.log(this.props)
        const {dataList=[]} = this.props.distribution;
        const {myStore={}} = dataList;
        return ( <Flex direction="column" className={distributionSearch} style={{height:"100%"}}>
                <NavTopBar title="小店名称" dispatch={this.props.dispatch}/>
                <div style={{textAlign:"center",background:"#fff",width:"100%",position:"relative",paddingBottom:".2rem"}}>
                    <NoLazyImg src={this.state.img==""?myStore.logo?myStore.logo:"":this.state.img}  style={{display:"block",margin:".4rem auto",width:"1.2rem",height:"1.2rem",borderRadius:"100%"}}></NoLazyImg>
                    <div>点击更换店铺图标</div>
                    <label htmlFor="storeLogoFile" style={{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"111"}} id="storeLogo" >

                    </label>
                    <input accept="image/*" multiple type="file" id="storeLogoFile" ref="store" style={{display:"none"}} onChange={this.onChange}/>
                </div>

                <List style={{width:"100%",marginTop:".2rem"}}>
                    <InputItem
                        {...getFieldProps('storeName')}
                        clear
                        maxLength = {20}
                        placeholder={myStore.name}
                    >店铺名称</InputItem>
                </List>


                <Button className={ btn } onClick={this.edit} >确认修改</Button>
            </Flex>

        )


    }
}

export default connect(({ distribution,orderList }) => ({ distribution,orderList}))(createForm()(EditMyDistribution));
